<template>
  <div id="main-content">
    <Scroll ref="scroll">
      <div  class="rules-wrapper">
        <!-- eslint-disable -->
        <div class="firstTitle">
        	<p class="title">“疯狂折扣”怎么玩？</p>
        	<div class="main">
            <h3>小额定金，双重优惠，疯狂到爆！</h3>
        		<h5>一重优惠</h5>
            <p>支付小额定金，即可在支付尾款时获得一定额度的优惠。</p>
            <h5>二重优惠</h5>
            <p>除此之外，还可以参与“免尾款”活动，成功预测活动的“免尾款码”，<span class="orange">尾款即可全免！</span> </p>
          <div class="step"> </div>
        	</div>
        </div>
        <div class="firstTitle">
        	<p class="title">“疯狂折扣”活动规则</p>
        	<div class="main">
            <h5>定金购买规则</h5>
            <p>1.	定金下单后，请在5分钟内支付，超时将自动取消。</p>
            <p>2.	支付定金后，可在尾款支付时获得一定额度的优惠，具体额度以商品页面显示的为准。</p>
            <p>3.	<span class="orange">定金支付后，恕不退还。</span></p>
            <p>4.	请在规定的尾款支付时间内至“我的订单”进行支付，超时将自动关闭，且定金不予退还</p>
            <p>5.	<span class="orange">非商品质量问题引起的退换货，商品运费由您承担</span>；特殊商品不支持7天无理由退换货。</p>
            <h5>"免尾款"活动规则</h5>
            <p>1.	<span class="orange">定金支付后才能参与免尾款活动。定金恕不退还。</span></p>
            <p>2.	<span class="orange">成功预测活动的“免尾款码”的对应位数即可免付尾款和运费。</span></p>
            <p>3.	免尾款码由三位数字组成，从10:00到22:00，每10分钟生成一个，从22:00到次日2:00，每5分钟生成一个。</p>
            <p>4.	每件商品对应1份定金和1次预测机会。您的预测从定金支付完成三分钟后开始生效，所预测的是预测生效后生成的第一个免尾款码。例如，若定金于10:14支付完成，则预测从10:17开始生效，所预测的是10:20分生成的免尾款码；若定金于10:18分支付完成，则预测从10:21分开始生效，所预测的将是10:30分生成的免尾款码。</p>
            <p>5.	您所预测的免尾款码的位数与定金比例的对应关系如下表：</p>
            <div class="table"> </div>
            <p>6. 为维护用户权益，免尾款码取自重庆时时彩的同期开奖号码的百位、十位与个位数，确保公平公开公正。</p>
        	</div>
        </div>
      </div>
    </Scroll>
  </div>

</template>
<script>
import { Scroll } from "~/vScroll";
import Ajax from "@/mixins/ajax";

export default {
  name: "RulesInfo",
  mixins: [Ajax],
  components: { Scroll },
  mounted() {
    this.$nextTick(() => {
      this.$refs.scroll.refresh();
    });
  }
};
</script>

<style scoped>
body {
  background: #fff;
}
.rules-wrapper {
  width: auto;
  background: #f5f5f5;
}
.rules-wrapper h3 {
  padding: 0.04rem 0;
}
.rules-wrapper .lastItem {
  padding-bottom: 1.6rem;
}
.rules-wrapper h4 {
  padding: 0.04rem 0;
}
.rules-wrapper h5 {
  padding: 0.1rem 0;
  font-size: 0.34rem;
}

.rules-wrapper div {
  padding: 0.06rem 0;
}
.title {
  text-align: center;
  width: 8.05rem;
  height: 1.31rem;
  color: #fff;
  background: url("../../assets/img/title.png") 0/100% 100%;
  margin: 0 auto;
  padding-top: 0.1rem;
  margin-top: 0.45rem;
  margin-bottom: .54rem;
}
.firstTitle {
  width: 100%;
  margin-top: 0.45rem;
  background: #fff;
}
.main {
  width: 7.91rem;
  margin: 0 auto;
  margin-bottom: .9rem;
}
.main h3 {
  color: #b71358;
  text-align: center;
  font-size: .42rem;
  padding-bottom: .87rem;
}
.main h5 {
  color: #b71358;
  font-size: .42rem;
  padding-bottom: .19rem;
}
.main p {
  font-size: .36rem;
  line-height: .54rem;
  padding-bottom: .54rem;
}
.step {
  margin: 0 auto;
  width: 6.08rem;
  height: 8.83rem;
  background: url("../../assets/img/ruler-step.png") no-repeat center/contain;
}
.main span.orange {
  color: #e23f40;
}
.table {
  margin: 0 auto;
  width: 7.91rem;
  height: 3.01rem;
  margin-bottom: .54rem;
  background: url("../../assets/img/ruler-table.png") no-repeat center/contain;
}
</style>
